<template>
  <div class="body">
    <div v-for="(item,index) of count" :key="index" class="count-back">
      <div>{{ item }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Count',
  props: {
    count: String
  },
  // watch: {
  //   count: {
  //     handler(){
  //       const num = this.count.length
  //       if(num < 10){
  //         this.count = `000${this.count}`
  //         return
  //       }
  //       if(num < 100){
  //         this.count = `00${this.count}`
  //         return
  //       }
  //       if(num < 1000){
  //         this.count = `0${this.count}`
  //         return
  //       }
  //     }
  //   }
  // }
}
</script>

<style scoped>
.body {
  display: flex;
  margin: 0 12px 0 12px;
}
.count-back {
  margin-right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  width: 50px;
  height: 65px;
  background: url('../../assets/large/shuzibeijing@3x.png') no-repeat;
  background-size: 100% 100%;
}
:last-child{
  margin: 0 auto;
}
</style>
